<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button>点我跳转</button>
		<input type="search" />
		<button>点我前进</button>
		<button>点我缓存</button>
		<button>点我cookies</button>
		<button>点我开始下载</button>
		
		
		<progress value="0" width="100px" height="20px" max="100"></progress>
		<script>
			var btn = document.getElementsByTagName("button");
			
			var progress = document.getElementsByTagName("progress")[0];
			var Input = document.getElementsByTagName('input')[0];
			
//			//从本页输入传到另一页的url上,可以给另一页拿到
//			btn[0].onclick = function(){
//				var inputValue = Input.value;
//				location.href = "系统对象2.html?keyword="+inputValue;  //本地跳转
//				
//				
//			}
//			btn[1].onclick = function(){ //历史记录，为1记录前一页，-1为后一页
//				history.go(1);
//			}
//			
//			//navigetor.user    包含有关浏览器的信息
//			
//			//screen  包含有关客户端显示屏幕的信息
//			
//			//localStorage  保存后强行改为字符串
//			btn[2].onclick = function(){ 
//				localStorage.setItem("keyword",555);  //长久保存   强行改为字符串
//				
//				//要么就转为JSON   JSON.parse(localStorage.getItem("keyword")); 
//				
//			}
//			
//			//cookies    储存在用户本地终端上的数据
//			btn[3].onclick = function(){
//				var inputValue = Input.value;
//				var d = new Date();
//				d.setTime(d.getTime()+ 60*1000); //一分钟后销毁cookies
//				console.log(d.toGMTString());
//				document.cookies = "BAIDUID"+inputValue+";Expires="+d.toGMTString();
//			}
			
			
			btn[4].onclick = function(){
			var xhr = new XMLHttpRequest();
			var src = "http://huihongskd.gitee.io/music_event/audio/long.mp3";
			xhr.open("get",src,true);
			xhr.send();
			xhr.addEventListener('readystatechange',function(e){
				var res = e.target;
				if(res.readyState == 4){
					if(res.state == 200){
						console.log("请求成功");
					}
				}
			});
//			xhr.addEventListener('progress',function(e){
//				console.log(e);
//			});
			
			//监听进度
			xhr.onprogress = function(e){
				if(e.lengthComputable){
					progress.setAttribute("value",e.loaded);
					progress.setAttribute("max",e.total);
				}
			}
			} 
		</script>
		
	</body>
</html>
